<!--ID:helper.html-->
<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link href="../libs/mui.min.css" rel="stylesheet"/>
    <link href="../libs/app.css" rel="stylesheet"/>
    <link href="../css/main.css" rel="stylesheet"/>
    <link href="../css/helper.css" rel="stylesheet"/>
</head>

<body>
<div class="helper-context mui-scroll-wrapper on">
    <div class="mui-scroll">
        <div class="helper-slider">
            <div class="search-wrapper">
                <span id="search">请输入关键词</span>
                <img src="../images/search.png" alt="">
            </div>
            <div id="slider" class="mui-slider">
                <div class="mui-slider-group mui-slider-loop">
                    <!--<div class="mui-slider-item mui-slider-item-duplicate">-->
                    <!--&lt;!&ndash;重复最后张&ndash;&gt;-->
                    <!--<a href="#"><img src="../images/slider1.png"></a>-->
                    <!--</div>-->

                    <!--<div class="mui-slider-item">-->
                    <!--<a href="#"><img src="../images/slider2.png"></a>-->
                    <!--</div>-->
                    <!--<div class="mui-slider-item">-->
                    <!--<a href="#"><img src="../images/slider3.png"></a>-->
                    <!--</div>-->
                    <!--<div class="mui-slider-item">-->
                    <!--<a href="#"><img src="../images/slider1.png"></a>-->
                    <!--</div>-->

                    <!--<div class="mui-slider-item mui-slider-item-duplicate">-->
                    <!--&lt;!&ndash;重复第一张&ndash;&gt;-->
                    <!--<a href="#"><img src="../images/slider1.png"></a>-->
                    <!--</div>-->
                </div>
                <div class="mui-slider-indicator">
                    <!--<div class="mui-indicator mui-active"></div>-->
                    <!--<div class="mui-indicator"></div>-->
                    <!--<div class="mui-indicator"></div>-->
                </div>
            </div>
        </div>
        <div class="helper-context-p">
            <p>入店必买，教你快速提额</p>
            <img class="helper-context-p-img1" src="../images/yellow-up.png" alt="">
            <img class="helper-context-p-img2" src="../images/yellow-down.png" alt="">
        </div>
        <div class="context-1">
            <!--<div class="helper-context-1">
                <img src="../images/helper-back.png" alt="" width="92%">
                <p class="helper-context-1-1">价格¥<span>65654</span></p>
                <p class="helper-context-1-2">会员价¥<span>14654</span></p>
                <div>
                    <button  onclick="href('helper/vip-pay.html','pay')" class="helper-context-1-b1">会员申请</button>
                    <button  onclick="href('helper/buy-car.html','buy')" class="helper-context-1-b2">加入购物车</button>
                </div>
            </div>

            <div class="helper-context-1">
                <img src="../images/helper-back.png" alt="" width="92%">
                <p class="helper-context-1-1">价格¥<span>65654</span></p>
                <p class="helper-context-1-2">会员价¥<span>14654</span></p>
                <div>
                    <button  onclick="href('helper/vip-pay.html','pay')" class="helper-context-1-b1">会员申请</button>
                    <button  onclick="href('helper/buy-car.html','buy')" class="helper-context-1-b2">加入购物车</button>
                </div>
            </div>-->
        </div>

        <div class="addmore">
            <button class="saddmore" onclick="getall('more')">点击加载更多</button>
        </div>

    </div>
</div>

<div class="goods-car" id="goods-car" onclick="href('helper/buy-car.html','goods-car');">
    <div class="goods-car-d">
        <img src="../images/goods-car.png" alt="">
        <div class="how"></div>
    </div>
</div>

<script src="../js/userInfo.js"></script>

<script>
    // 轮播图
    (function () {
        $.ajax({
            type: 'get',
            url: ur + 'rest/advertisingPositionController/list/',
            async: false,
            headers: {
                'X-token': localStorage.token
            },
            dataType: 'json',
            data: {
                'type': 2 // 信贷轮播类型
            },
            success: function (res) {
                if (res.meta.code === 'S002') {
                    var list = res.data.list,
                        n = list.length,
                        els = [],
                        radius = [];
                    // 第一项为最后项的拷贝
                    els[0] = '<div class="mui-slider-item mui-slider-item-duplicate">' +
                        '<a href="' + list[n - 1].link + '">' +
                        '<img src="' + ur + list[n - 1].image + '" data-id="' + list[n - 1].id + '" onerror="imgErr(this)">' +
                        '</a></div>';
                    // 中间项
                    for (var i in list) {
                        var temp = '<div class="mui-slider-item">' +
                            '<a href="' + list[i].link + '">' +
                            '<img src="' + ur + list[i].image + '" data-id="' + list[i].id + '" onerror="imgErr(this)">' +
                            '</a></div>';
                        els.push(temp);
                        radius.push('<div class="mui-indicator"></div>');
                    }
                    // 最后项
                    var last = '<div class="mui-slider-item mui-slider-item-duplicate">' +
                        '<a href="' + list[0].link + '">' +
                        '<img src="' + ur + list[0].image + '" data-id="' + list[0].id + '" onerror="imgErr(this)">' +
                        '</a></div>';
                    els.push(last);
                    $('.mui-slider-group').html(els.join(''));
                    $('.mui-slider-indicator').html(radius.join(''));
                    $('.mui-indicator:first').addClass('mui-active')
                }
            }
        });
    })();
    mui('.mui-slider').slider({
        interval: 1000
    });

    function addShopCard() {
        /*加入购物车*/
        document.querySelector('.context-1').removeEventListener('tap', addcar, false);
        $('.context-1').off('tap', '.helper-context-1-b2', addcar);
        $('.context-1').on('tap', '.helper-context-1-b2', addcar);
    }
    function addcar(event) {
        event.stopPropagation();
        var _this = event.target;
        if (!$(_this).data('have')) {
            $.ajax({
                url: ur + 'rest/productController/add-order',
                type: 'POST',
                dataType: 'json',
                headers: {
                    "X-Token": localStorage.token
                },
                data: {
                    "orderId": localStorage.carid,
                    "productId": $(_this).attr('id'),
                    "size": '1',
                }
            })
                .done(function (data) {

                    if (data.meta.code == 'S002') {
                        $('.how').text(parseInt($('.how').text()) + 1);
                        localStorage.carNumber++;
                        mui.toast('成功加入购物车');
                    } else {
                        /*plus.nativeUI.closeWaiting();*/
                    }
                });
        }
        return false;
    }

    var p = 1, vip;
    /*获取商品信息添加列表*/
    function getall(str) {
        if (!localStorage.token) return;
        var saveUsers = new User();
        if (str == 'more') {
            p++;
        }
        saveUsers.def_hasVip().then(function (data) {
            vip = data;
            vip ? localStorage.setItem('vip', 'true') : localStorage.setItem('vip', 'false');
            _getall(data);
        });
        function _getall(vip) {
            if (vip) {
                $('.context-1').addClass('vip');
            } else {
                $('.context-1').removeClass('vip');
            }
            /*mui.plusReady(function(){
             plus.nativeUI.showWaiting();
             })*/
            $.ajax({
                url: ur + 'rest/productController/list?page=' + p,
                type: 'GET',
                headers: {
                    "X-Token": localStorage.token
                },
                dataType: 'json',
                data: '',
            })
                .done(function (data) {
                    if (data.data.total < 10) {
                        $('.addmore').hide(0);
                    } else if (data.data.total > 10) {
                        $('.addmore').show(0);
                    }
                    var n = data.data.list.length,
                        list = data.data.list,
                        items = '';
                    if (n > 0) {
                        for (var i = 0; i < n; i++) {
                            if (vip) {
                                var item = '<div  class="helper-context-1">' +
                                    '<img class="div-img" id=' + list[i].id + '  src=' + ur + list[i].image + ' alt="" width="92%" data-name="' + list[i].name + '" onerror="imgErr(this)">' +
                                    '<div class="vipshow">' +
//                                    '<p class="helper-context-1-1">价格¥<span class="price1">' + list[i].price + '</span></p>' +
                                    '<p class="helper-context-1-2">会员价¥<span class="price2">' + list[i].vipPrice + '</span></p>' +
//                                    '<button class="helper-context-1-b1">会员申请</button>' +
                                    '<button class="helper-context-1-b2 ' + (list[i].have ? 'off' : '') + '" id=' + list[i].id + ' data-have="' + list[i].have + '">' + (list[i].have ? '已购买' : '加入购物车') + '</button>' +
                                    '</div>' +
                                    '</div>';
                            } else {
                                var item = '<div  class="helper-context-1">' +
                                    '<img class="div-img" id=' + list[i].id + '  src=' + ur + list[i].image + ' alt="" width="92%" data-name="' + list[i].name + '" onerror="imgErr(this)">' +
                                    '<p class="helper-context-1-1">价格¥<span class="price1">' + list[i].price + '</span></p>' +
                                    '<p class="helper-context-1-2">会员价¥<span class="price2">' + list[i].vipPrice + '</span></p>' +
                                    '<div><button class="helper-context-1-b1">会员申请</button>' +
                                    '<button class="helper-context-1-b2 ' + (list[i].have ? 'off' : '') + '" id=' + list[i].id + ' data-have="' + list[i].have + '">' + (list[i].have ? '已购买' : '加入购物车') + '</button>' +
                                    '</div>' +
                                    '</div>';
                            }
                            items += item;
                        }
                        if (str == 'more') {
                            $('.context-1').append(items);
                        } else {
                            $('.context-1').empty().append(items);
                        }
                        addShopCard();
                    } else if (n == 0) {
                    }
                });
        }
    }

    /*购物车添加产品前开启购物车*/
    function opencar() {
        if (!localStorage.token) return;
        $.ajax({
            url: ur + 'rest/productController/order',
            type: 'GET',
            headers: {
                "X-Token": localStorage.token
            },
            dataType: 'json',
            data: '',
        })
            .done(function (data) {
                localStorage.carid = data.data;
            });
    }

    /*开启悬浮购物车的列表获取购物车总数*/
    function openlist() {
        if (!localStorage.token) return;
        $.ajax({
            url: ur + 'rest/productController/list-order?page=' + p,
            type: 'GET',
            headers: {
                "X-Token": localStorage.token
            },
            dataType: 'json',
            data: '',
        })
            .done(function (data) {
                if (data.meta.code == 'S002') {
                    var carNumber = data.data.total ? data.data.total : 0;
                    $('.how').text(carNumber);
                    localStorage.carNumber = carNumber;
                } else {
//                  mui.toast(data.meta.message);
                }
            })
    }
    opencar();
    openlist();
    getall();


    mui('.mui-scroll-wrapper').scroll({
        deceleration: 0.0010
    });

    $(document).on('tap', '.helper-context-1-b1', function () {
        href('helper/vip-pay.html', 'pay');
    });
    // 点击图片进入详情
    $(document).on('tap', '.helper-context-1>img', function () {
        var _this = $(this);
//        var details = {
//            id: _this.attr('id'),
//            imgSrc: _this.attr('src'),
//            price: _this.parents('.helper-context-1').find('.helper-context-1-1').children().text(),
//            vipPrice: _this.parents('.helper-context-1').find('.helper-context-1-2').children().text(),
//            name: _this.data('name')
//        };
        localStorage.details = _this.attr('id');
//        localStorage._details = JSON.stringify(details);
//        href('helper/details.html', 'details.html', {vip: vip});
        href('helper/details.html', 'details.html');
    });

    // 搜索
    $(document).on('tap', '#search', function () {
        href('helper/search-view.html', 'search-view', {vip: vip});
    });

    // 刷新购物车数量
    window.addEventListener('refresh', function () {
        getall();
        opencar();
        openlist();
        $('.how').text(localStorage.carNumber);
        document.querySelector('.helper-context').classList.add('on');
    }, false);

    window.addEventListener('searchRefresh', function () {
        openlist();
    }, false);

    function imgErr(e) {
        e.src = '../images/error.png';
    }
</script>
</body>

</html>